{extend name="user/index" /}

{block name="title"}
<title>[ User Edit ]</title>
{/block}

{block name="css"}
{css href="_CSS_user.css"}
{/block}

{block name="main"}
<div class="container mt50 text-warning">

    <div class="row mt40">
        <div class="col-md-5">
            <h1 class="text-info" style="font-size: 30px">编辑 [ {$row['uname']} ] 的信息</h1>
            <form action="{:url('index/user/update',['id'=>$row['id']])}" method="post" name="addForm"
                  class="form-horizontal mt20" onsubmit="return checkForm()">
                <input type="hidden" name="_method" value="PUT">

                <div class="form-group">
                    <input type="text" class="form-control input-lg" name="utel" value="{$row['utel']}"
                           onblur="checkTel()" maxlength="11"
                           placeholder="输入手机号">
                    <p class="help-block text-danger">* 必填项. 请检查输入的是正确的手机号</p>
                    <span id="utel" class="label hidden">未验证</span>
                </div>

                <div class="form-group">
                    <div class="btn-group">
                        {if condition="$row['usex'] == 0"}
                        <label class="btn btn-danger sexBtn">
                            <input type="radio" name="usex" value="0" checked> 美女
                        </label>
                        <label class="btn btn-info sexBtn">
                            <input type="radio" name="usex" value="1"> 帅哥
                        </label>
                        {else /}
                        <label class="btn btn-info sexBtn">
                            <input type="radio" name="usex" value="0"> 美女
                        </label>
                        <label class="btn btn-danger sexBtn">
                            <input type="radio" name="usex" value="1" checked> 帅哥
                        </label>
                        {/if}
                    </div>
                </div>

                <div class="form-group">
                    <input type="text" class="form-control input-lg" name="uinfo"
                           value="{:htmlspecialchars($row['uinfo'])}" placeholder="输入你的座右铭 或 激励自己的话">
                    <p class="help-block text-danger">学员自我介绍 / 个性签名</p>
                </div>

                <div class="form-group">
                    <input type="text" class="form-control input-lg" name="umarks" value="{$row['umarks']}"
                           placeholder="学员的备注信息">
                    <p class="help-block text-danger">需要特殊备注，请写在此处</p>
                </div>

                <div class="form-group mt30">
                    <button type="submit" class="btn btn-lg btn-default">保存</button>
                    <button type="reset" class="btn btn-lg btn-danger pull-right">重填</button>
                </div>
            </form>
        </div>

        <div class="col-md-5 col-md-offset-2 mt20">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="###" class="bg-danger" data-target="#tab2Content1" data-toggle="tab">学员转班</a>
                </li>
                <li>
                    <a href="###" class="bg-danger" data-target="#tab2Content2" data-toggle="tab">占位</a>
                </li>
                <li>
                    <a href="###" class="bg-danger" data-target="#tab2Content3" data-toggle="tab">改写学员班期</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active fade active in" id="tab2Content1">
                    <div class="row mt30">
                        <form name="sclassform" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-3 input-lg">现在班期：</label>
                                <div class="col-md-9">
                                    <p class="form-control-static input-lg">{$row['uclass']}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 input-lg">转入班期：</label>
                                <div class="col-md-9">
                                    <select name="uclass" class="form-control input-lg">
                                        {foreach $class as $val}
                                        <option value="{$val['class_name']}">{$val['class_name']}</option>
                                        {/foreach}
                                    </select>
                                    <p class="help-block text-danger text-center"><span class="text-info">【转班】</span>操作，选择要转入的班期，会记录历史班期
                                    </p>
                                </div>
                            </div>
                            <div class="form-group mt30">
                                <div class="col-md-9 col-md-offset-3">
                                    <button type="button" id="shiftclassBtn" data-id="{$row['id']}"
                                            class="btn btn-lg btn-default">执行转班
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="tab-pane fade" id="tab2Content2">
                    <div class="row mt30">
                        暂无
                    </div>
                </div>
                <div class="tab-pane fade" id="tab2Content3">
                    <div class="row mt30">
                        <form name="cclassform" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-3 input-lg">原始班期：</label>
                                <div class="col-md-9">
                                    <p class="form-control-static input-lg">{$row['uclass']}</p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 input-lg">改入班期：</label>
                                <div class="col-md-9">
                                    <select name="uclass" class="form-control input-lg">
                                        {foreach $class as $val}
                                        <option value="{$val['class_name']}">{$val['class_name']}</option>
                                        {/foreach}
                                    </select>
                                    <p class="help-block text-danger text-center"><span class="text-info">【改变班期】</span>操作，选择要改变的班期，重新分配班期
                                    </p>
                                </div>
                            </div>
                            <div class="form-group mt30">
                                <div class="col-md-9 col-md-offset-3">
                                    <button type="button" id="changeclassBtn" data-id="{$row['id']}"
                                            class="btn btn-lg btn-warning">更改班期
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr>
    <div class="col-md-12 text-center">
        <address>
            <a href="http://www.itxdl.cn" target="_blank" style="color:#03B8CF">Copyright&nbsp;<span class="glyphicon glyphicon-copyright-mark"></span>
                &nbsp;2015&nbsp;&nbsp;• itxdl.cn</a> 丨
            <a href="http://weibo.com/sosdust" target="_blank" style="color:#03B8CF"> 探索者丶枫 [ 讲师.黄超 ]</a>
        </address>
    </div>
</div>
{/block}

{block name="js"}
<script>
    var status1 = 0;

    function checkTel() {
        let obj = $('#utel');
        let tel = document.addForm.utel.value;
        if (tel.length !== 11) {
            obj.removeClass('hidden label-success label-danger')
                .addClass('label-danger');
            obj.html('手机号位数不够!');
            status1 = 0;
            return false;
        }
        let reg = /1[3456789]\d{9}/;
        if (!reg.test(tel)) {
            obj.removeClass('hidden label-success label-danger')
                .addClass('label-danger');
            obj.html('手机号格式有误！');
            status1 = 0;
            return false;
        }
        obj.removeClass('hidden label-success label-danger')
            .addClass('label-success');
        obj.html('格式正确！');
        status1 = 1;
        return true;
    }

    $('.sexBtn input').on('click', function () {
        $(this).parents('label')
            .removeClass('btn-info').addClass('btn-danger');
        $(this).parents('label').siblings('label')
            .removeClass('btn-danger').addClass('btn-info');
    });

    function checkForm() {
        checkTel();
        if (status1 === 0) {
            return false;
        }
        return true;
    }

    $('#shiftclassBtn').click(function () {
        let cdata = $('form[name="sclassform"]').serialize();
        let id = $(this).attr('data-id');
        $.ajax({
            method: 'put',
            url: '/user/' + id + '/sclass',
            data: cdata,
            dataType: 'json',
            success: function (data) {
                new $.zui.Messager(data.msg, {
                    time: 3000,
                    placement: 'top-right',
                    type: data.status,
                    close: false
                }).show();
                setTimeout(function () {
                    location.reload();
                }, 3000);
            },
            error: function () {
                alert('操作失败，请重试！');
            }
        });
    });

    $('#changeclassBtn').click(function () {
        let cdata = $('form[name="cclassform"]').serialize();
        let id = $(this).attr('data-id');
        $.ajax({
            method: 'put',
            url: '/user/' + id + '/cclass',
            data: cdata,
            dataType: 'json',
            success: function (data) {
                new $.zui.Messager(data.msg, {
                    time: 3000,
                    placement: 'top-right',
                    type: data.status,
                    close: false
                }).show();
                setTimeout(function () {
                    location.reload();
                }, 3000);
            },
            error: function () {
                alert('操作失败，请重试！');
            }
        });
    });

</script>
{/block}
